<template>
  <div>
    <div class="work-info" v-for="item in workStudyInfoDetails">
      <div class="top">
        <div class="name">我的天</div>
        <br />
        <div class="time">发布于<span>2019-10-01</span></div>
      </div>
      <ul class="middle">
        <li>
          招聘职位：<span>{{ item.name }}</span>
        </li>
        <li>
          岗位性质：<span>{{ item.type }}</span>
        </li>
        <li>
          单位地址：<span>{{ item.location }}</span>
        </li>
        <li>
          工作时间：<span>{{ item.worktime }}</span>
        </li>
        <li>
          工作地点：<span>{{ item.workplace }}</span>
        </li>
        <li>
          工作报酬：<span>{{ item.pay }}</span>
        </li>
      </ul>
      <ul class="bottom">
        <li>
          截止时间：<span>{{ item.deadline }}</span>
        </li>
        <li>
          性别要求：<span>{{ item.sex }}</span>
        </li>
        <li>
          年级要求：<span>{{ item.grade }}</span>
        </li>
        <li>
          校区要求：<span>{{ item.place }}</span>
        </li>
        <li>
          工作内容：<span>{{ item.need }}</span>
        </li>
      </ul>
    </div>
    <div class="workinfo-detail-footer">
      <p>
        <strong>备注:</strong
        ><br />1:每位同学只能参加一份校内固定岗位,不得同时报名临时岗位;<br />
        2:临时岗位可同时报名数个,但每月工资加起来不得超过400.00元.<br />报名的同学请及时联系合肥工业大学勤工助学中心校内岗位部.电话:<a
          href="tel:0551-62901052"
          >0551-62901052</a
        >
        ;QQ:<a href="http://wpa.qq.com/msgrd?v=1&amp;uin=1826814987"
          >1826814987</a
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkInfoDetail",
  data() {
    return {
      workStudyInfoDetails: []
    };
  },
  mounted() {
    this.getWorkInfoDetail();
  },
  methods: {
    getWorkInfoDetail() {
      this.$axios
        .get(`/WorkStudyInfo/${this.$route.params.id}`)
        .then(res => {
          this.workStudyInfoDetails = res.data.data;
          console.log(this.workStudyInfoDetails);
        })
        .catch(error => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}

p {
  font-size: 13px;
  color: #cccccc;
}

a {
  text-decoration: none;
  color: black;
}

.top {
  background-color: white;
  padding: 10px 20px 5px 20px;
  height: 70px;
}

.name {
  font-size: 1.2em;
}

.name a:hover {
  cursor: pointer;
}

.time {
  font-size: 0.9em;
  color: grey;
}

.middle {
  margin-top: 8px;
  background-color: white;
  padding: 10px 20px 5px 20px;
  height: 250px;
}

.middle li {
  color: grey;
  border-bottom: 1.5px solid #dcdcdc;
  padding: 10px 0;
}

.middle li span {
  color: black;
}

.bottom {
  margin-top: 8px;
  background-color: white;
  padding: 10px 20px 5px 20px;
  height: 250px;
}

.bottom li {
  color: grey;
  border-bottom: 1.5px solid #dcdcdc;
  padding: 10px 0;
}

.bottom li span {
  color: black;
}

.work-info {
  text-align: left;
}

.workinfo-detail-footer {
  width: 100%;
  text-align: left;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
</style>
